<template>
	<div class="content">
    <div class="title">
      <div class="titleText">验证码登录</div>
      <div class="title_bottom"></div>
    </div>
    <div class="inputContent">
      <van-field v-model="newPhone" placeholder="请输入手机号码"/>
    </div>
    <div class="inputContent">
      <div class="inputLeft">
        <van-field v-model="newPhone" placeholder="请输入图形验证码"/>
      </div>
      <div class="inputRight"></div>
    </div>
    <div class="inputContent">
      <div class="inputLeft">
        <van-field v-model="newPhone" placeholder="请输入短信验证码"/>
      </div>
      <div class="inputRight">
        获取验证码
      </div>
    </div>
    <div class="inputContent">
      <van-field v-model="newPhone" placeholder="请输入密码"/>
    </div>
    <div class="submit" @click="sure">立即登录</div>
	</div>
</template>

<script>
import { baseApi } from '@/config'
export default {
  name: "login",
  data() {
    return {
        updatePhoneShow: true,
        newPhone: '',
        smsCode: '',
        time: 60000,
        showCountDown: false,
        captcha: '',
        uuid: '',
        imgUrl: '',
        title: '绑定手机号码'
    };
  },
  mounted() {
    this.uuidImgData()
  },
  methods: {
      sure(){
        this.$router.push({
        	path: 'workbench'
        })
      },
      getUUID() {
        return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, c => {
          return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16)
        })
      },
      uuidImgData() {
        this.uuid = this.getUUID()
        this.imgUrl = baseApi + '/app/user/captcha.jpg?uuid=' + this.uuid + '&token=' + this.$getStore('token')
        console.log(this.imgUrl)
      },
      uuidClick() {
        this.uuidImgData()
      },
      phoneCancel() {
        this.cancelData()
        this.$emit('phoneCancel')
      },
      countDownFinish() {
        this.time = 60000
        this.showCountDown = false
        this.$refs.countDown.reset()
      },
      cancelData() {
        this.newPhone = ''
        this.captcha = ''
        this.uuid = ''
        this.uuidImgData()
      },
      getSms() {
        if (!/^1[3456789]\d{9}$/.test(this.newPhone)) {
          this.showToast('请输入正确的手机号码')
          return false
        }
        if (!this.captcha) {
          this.showToast('请输入图形验证码')
          return false
        }
        const data = {
          phone: this.newPhone,
          captcha: this.captcha,
          uuid: this.smsCode
        }
        GetCodeSms(data)
          .then(res => {
            if (res.code === 0) {
              this.showToast(res.msg)
              this.$refs.countDown.start()
              this.showCountDown = true
            } else {
              this.showToast(res.msg)
              this.uuidImgData()
            }
          })
          .catch(res => {
            this.cancelData()
            this.showToast(res.msg)
          })
      },
      beforeClose() {
        // 点击的是确认按钮
        // 校验手机号码
        if (!/^1[3456789]\d{9}$/.test(this.newPhone)) {
          this.showToast('请输入正确的手机号码')
          return false
        }
        if (!this.captcha) {
          this.showToast('请填写图形验证码')
          return false
        }
        if (!this.smsCode) {
          this.showToast('请填写短信验证码')
          return false
        }
        // 请求修改接口
        const data = {
          mobile: this.newPhone,
          mobileCode: this.smsCode,
          captcha: this.captcha,
          uuid: this.uuid
        }
        UpdatePhone(data)
          .then(res => {
            if (res.code !== 0) {
              this.showToast(res.msg)
              this.smsCode = ''
              this.cancelData()
            }
          })
          .catch(res => {
            this.showToast(res.msg)
            this.smsCode = ''
            this.cancelData()
          })
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      }
  },
};
</script>

<style scoped lang="scss">
  .content{
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    .title{
      margin: 48px 0 37px 37px;
      position: relative;
      width: 120px;
      height: 25px;
      .titleText{
        position: absolute;
        top: 0;
        left: 0;
        font-weight: 550;
        font-size: 20px;
        color: #313131;
        z-index: 99;
        font-family: Source Han Sans CN, Source Han Sans CN;
        text-align: center;
        width: 120px;
      }
      .title_bottom{
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        width: 71px;
        height: 12px;
        background-color: rgb(32, 128, 255);
        z-index: 98;
        border-radius: 15px;
      }
    }
    .inputContent{
      width: 338px;
      height: 38px;
      margin: 18px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .van-cell{
        background-color: #F8F8F8;
      }
      .inputLeft{
        width: 211px;
        height: 38px;
        background: #F8F8F8;
      }
      .inputRight{
        width: 110px;
        height: 38px;
        background: #2080FF;
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        line-height: 38px;
      }
    }
    .submit{
      width: 337px;
      height: 45px;
      background: #2080FF;
      font-size: 21px;
      color: #FFFFFF;
      text-align: center;
      line-height: 45px;
      margin: 44px auto 0;
    }
  }
</style>
